<template>
  <div class="newlist">
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../../assets/l_jt.png" alt />
      <span>帮助中心</span>
    </div>
    <ul class="mui-newslist-container" v-for="(item, index) in itemss">
      <li class="mui-newlist-item">
        <h2>{{index+1}}.{{item[0]}}</h2>
      </li>
      <div v-for="(itemd, indexd) in item[1]">
        <li class="mui-newlist-item">
          <router-link
            :to="{
                              path: 'message',
                              params: {
                                  id: itemd.article_id, // orderNum : this.searchData.orderNo
                              },
                              query: {
                                 help:true,
                                 id: itemd.article_id, // orderNum : this.searchData.orderNo
                              }
                          }"
          >
            <h3>{{index+1}}.{{indexd+1}} {{itemd.title}}</h3>
          </router-link>
        </li>
      </div>
    </ul>
    <div style="height:1.333333rem"></div>
    <Tabbar :idx="5" />
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/public/Tabbar.vue";

export default {
  name: "help",
  components: {
    Tabbar
  },
  data() {
    return {
      size: 50,
      offset: 100,
      indexs: 0,
      btn: ["当前委托", "历史委托", "成交明细"],
      itemss: []
    };
  },
  created: function() {
    this.getDate();
  },
  mounted() {},
  methods: {
    getDate() {
      // var page = 1;
      // var limit = 10;

      this.$axios.post("/index/apihq/articleList1", {}).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          if (res.data.category.length > 0) {
            this.itemss = res.data.category;
          } else {
            // console.log(1)
            alert("暂无记录");
          }
        } else {
          alert(res.data.message);
        }
      });
    },

    //   onFetcha() {
    //     let items = []
    //     return new Promise((resolve) => {
    //         // 模拟请求 50 条数据，因为 size 设置为 50
    //         setTimeout(() => {
    //         for (let i = 0; i < 50; i++) {
    //             items.push({
    //             id: i,
    //             avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/danpliego/128.jpg',
    //             msg: '123',
    //             time: 'Thu Oct 25 2018 15:02:12 GMT+0800 (中国标准时间)'
    //             })
    //         }
    //         resolve(items)
    //         }, 1000)
    //     })
    //    },
    //    handleClick(data) {
    //     console.log('Item:' + data)
    //    },
    tab(str) {
      this.indexs = str;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.newlist {
  .mui-newslist-container {
    padding-left: 0.4rem;
    margin-bottom: .4rem;
    .mui-newlist-item {
      text-align: left;
      padding: 0.46rem;
      padding-left: 0;
      border-bottom: 1px solid #e9ebf3;
      padding-bottom: 0;
      h2 {
        text-align: left;
        font-weight: bold;
        color: #10131e;
        font-size: 0.533333rem;
        line-height: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      h3 {
        text-align: left;
        color: #10131e;
        font-size: 0.48rem;
        padding-bottom: 0.2rem;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .font-lightGray-30 {
        font-size: 0.4rem;
        color: #aab2ca;
        text-align: left;
      }
    }
  }
}
</style>

